<template>
  <el-container>
    <el-header>
      后台管理系统
      <el-dropdown class="user-dropdown">
        <div
          style="background-color: transparent; color: white; cursor: pointer"
          @click="$refs.dropdown.toggle()"
        >
          关于<el-icon class="el-icon--right" style="display: none"
            ><arrow-down
          /></el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu ref="dropdown">
            <!-- <el-dropdown-item>切换为管理员</el-dropdown-item> -->
            <el-dropdown-item @click="goout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-avatar style="float: right"> Admin </el-avatar>
    </el-header>
    <el-container>
      <el-aside width="200px" style="margin-top: 0px">
        <el-col :span="28">
          <el-menu
            active-text-color="#aeb405"
            class="el-menu-vertical-demo"
            default-active="2"
            text-color="##656262"
            @open="handleOpen"
            @close="handleClose"
          >
            <el-menu-item index="1">
              <el-icon><icon-menu /></el-icon>
              <span @click="golayout">首页</span>
            </el-menu-item>
            <el-menu-item index="2">
              <el-icon><icon-menu /></el-icon>
              <span @click="goUser">用户管理</span>
            </el-menu-item>
            <!-- </el-sub-menu> -->
            <el-menu-item index="3">
              <el-icon><icon-menu /></el-icon>
              <span @click="gobook">图书信息管理</span>
            </el-menu-item>

            <el-menu-item index="4">
              <el-icon><icon-menu /></el-icon>
              <span @click="goorder">订单管理</span>
            </el-menu-item>
            <!-- </el-sub-menu> -->
          </el-menu>
        </el-col>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "Admin",
  methods: {
    goout() {
      this.$router.push("/");
      localStorage.removeItem("token");
      alert("退出登录");
    },
    goUser() {
      this.$router.push("/UserInfo");
    },
    gobook() {
      this.$router.push("/BookInfo");
    },
    golayout() {
      this.$router.push("/Admin");
    },
    goorder() {
      this.$router.push("/OrderInfo");
    },
  },
};
</script>
<style lang="scss" scoped>
.el-header {
  height: 50px;
  background-color: #b3b996;

  width: 100%;
  color: rgb(213, 201, 136);
  font-size: 20px;
  text-align: left;
  line-height: 50px;
  text-shadow: 0px 1px 2px #76817a, 0px -5px 6px rgb(121, 146, 62),
    0px -9px 14px rgb(135, 150, 140), 0px -11px 18px rgb(185, 196, 177);
}
.el-avatar {
  flex: 1;
  margin-right: 20px;
  margin-top: 5px;
}
.user-dropdown {
  float: right;
  margin-right: 8px;
  margin-top: 20px;
  background-color: #b5bf8e;
}

.logo {
  height: auto;
  width: 50%;
}
.admin {
  font-size: 18px;
  margin-right: 100px;
}
</style>
